<template>
    <div>
        <van-goods-action>
            
            <van-goods-action-icon 
                :icon="isCollected?'star':'star-o'" 
                :text="isCollected?'已收藏':'未收藏'" 
                :color="isCollected?'#ee0a24':'#666'" 
                @click="hdClickcoll"
                :class="{'red':isCollected}"
            />
            <!-- :class="isCollected?'red':''" -->
            <van-goods-action-icon icon="cart-o" text="购物车" :badge="isLogin?goodsCount:0" @click="$router.push('/cart')"/>
            <van-goods-action-button type="danger" text="立即购买" />
            <van-goods-action-button type="warning" text="加入购物车" @click="goToAddCart"/>
            
        </van-goods-action>
    </div>
</template>

<script>
export default {
    props:["goodsCount"],
    data () {
        return {

            isCollected:false,
            isLogin:false
        }
    },
    created(){

        let topen = localStorage.getItem("token")
        if(topen){
            this.isLogin=true
        }
    },
    methods:{
        goToAddCart(){
            // 修改父组件中的 isShowSku
            this.$emit("changeIsShowSku")
        },
        hdClickcoll(){
            // 先判断有没有登录，没有登录则跳转到/user界面
            // let topen = localStorage.getItem("token")
            // if(!topen){
            //     // 提示请先登录
            //     this.$toast("请先登录！");
            //     setTimeout(()=>{
            //         this.$router.push("/user");
            //     },1000)

            //     return
            // }
            let ret = this.utils.mustBeLogin();
            if(!ret)return;
            this.isCollected = !this.isCollected
        }
    }
}
</script>
 
<style lang = "less" scoped>
.red{
    color:#ee0a24;
}
.van-goods-action{
    z-index: 9999;
}

</style>